<template>
  <div class="notice-main">
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
    >
      <ul>
        <li v-for="item in List" :key="item.index" class="van-cell--clickable">
          <!-- 头像 -->
          <div class="notice-item-wrapper">
            <img :src="item.user_info.avatar" alt="" class="notice-avatar">
            <div class="notice-message">
              <p class="notice-message-info">{{ item.user_info.username }}<span class="notice-message-type">{{ getTypeContent(item.mess_type) }}</span></p>
              <p class="notice-message-content">{{ item.content }}</p>
              <p class="notice-message-time">{{ getDateDiff(item.created_at) }}</p>
            </div>
            <img v-if="showImgOrContent(item.dynamic)" src="item.dynamic.pics[0]" alt="" class="notice-content-img">
            <p v-else class="notice-content-text text-ellipsis">{{ getDynamicContent(item.dynamic) }}</p>
            <div class="van-hairline--bottom notice-bottom-fix"></div>
          </div>
        </li>
      </ul>
    </van-list>

  </div>
</template>

<script type="text/ecmascript-6">
import { List, Cell } from 'vant'
import { getDateDiff } from '../../common/util.js'

export default {
  components: {
    [List.name]: List,
    [Cell.name]: Cell
  },

  data () {
    return {
      List: [],
      loading: false,
      finished: false
    }
  },
  created: function () {
  },
  methods: {
    onLoad () {
      this.axios.get('/user/notice/index').then((res) => {
        console.log(res)
        let item = res.data.items
        for (let i = 0; i < item.length; i++) {
          this.List.push(item[i])
        }
        this.loading = false
        if (res.data.meta.currentPage === res.data.meta.pageCount || res.data.meta.pageCount === 0) {
          this.finished = true
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    getTypeContent (type) {
      let content = ''
      switch (type) {
        case 'like' :
          content = '赞了'
          break

        case 'at' :
          content = '提及了'
          break

        case 'reply' :
          content = '回复了'
          break

        case 'send' :
          content = '转发了'
          break

        case 'comment':
          content = '评论了'
          break
      }
      return content
    },
    getDynamicContent (dynamic) {
      if (typeof (dynamic) !== 'undefined' && dynamic !== null) {
        if (typeof (dynamic.text) !== 'undefined' && dynamic.text !== null) {
          console.log(dynamic.text)
          return dynamic.text
        }
      }
      return ''
    },
    showImgOrContent (dynamic) {
      if (typeof (dynamic) !== 'undefined' && dynamic !== null) {
        if (typeof (dynamic.pics) !== 'undefined' && dynamic.pics.length > 0) {
          console.log('true')
          return true
        }
      }
      console.log('false')
      return false
    },
    getDateDiff (timestamp) {
      return getDateDiff(timestamp)
    }
  }
}

</script>

<style rel="stylesheet/scss" lang="scss">

  $top-control-margin-top: 0.4rem;

  p {
    margin: 0;
    padding: 0;
  }
  .notice-main {
    background-color: white;
  }
  .notice-item-wrapper {
    display: inline-block;
    width: 100%;
  }

  $avatar-width: 0.8rem;

  .notice-avatar {
    height: $avatar-width;
    width: $avatar-width;
    margin-top: $top-control-margin-top;
    margin-left: 0.2rem;
    border-radius: $avatar-width / 2;
  }

  $message-margin-left: 0.24rem;

  .notice-message {
    display: inline-block;
    vertical-align: top;
    margin-top: $top-control-margin-top;
    margin-left: $message-margin-left;
  }

  .notice-message-info {
    font-size: 15px;
    color: #fe574e;
  }

  .notice-message-type {
    margin-left: 0.1rem;
    color: #000000;
  }

  .notice-message-content {
    margin-top: 0.17rem;
    font-size: 14px;
    color: #535353;
  }

  .notice-message-time {
    margin-top: 0.17rem;
    font-size: 12px;
    color: #a4a8ab;
  }

  .notice-content-img {
    float: right;
    width: $avatar-width;
    height: $avatar-width;
    margin-top: $top-control-margin-top;
    margin-right: 0.2rem;
  }

  .notice-content-text {
    float: right;
    width: $avatar-width;
    height: 1rem;
    line-height: 0.5rem;
    font-size: 0.2rem;
    color: #989898;
    margin-top: $top-control-margin-top;
    margin-right: 0.2rem;
  }

  .text-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .notice-bottom-fix {
    padding-top: 0.37rem;
  }
</style>
